@import "../../common/style/mixin";
@import "../../common/style/variables";
$background: #2e2e36;

.movie-detail-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.movie-detail {
  display: flex;
  .left{
    width: 75%;
    background: $background;
    height: 100%;
    overflow-y: auto;
  }
  .video-wrapper {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 20px;
  }
  .left-comment{
    padding: 20px;
    background: rgba(255,255,255,.1);
    h3{
      color: #f2f2f2;
      margin: 0;
      padding: 0 0 20px 0;
      border-bottom: 1px dotted #d9d9d9;
    }
    .edit{
      color: $primary;
      cursor: pointer;
      display: inline-block;
      vertical-align: top;
      opacity: 0;
      &.del{
        color: $danger;
      }
    }
    .more-load{
      color:$primary;
      text-align: center;
      padding: 0 0 10px 0;
      &:hover{
        cursor: pointer;
      }
    }
    .no-more{
      color: #666;
      text-align: center;
      padding: 0 0 10px 0;
    }
    .comments-list{
      padding: 5px 0;
      .comment-item{
        padding: 15px 10px;
        color: #fff;
        &:not(:last-child){
          border-bottom: 1px solid #666;
        }
        .comment-main{
          display: flex;
          &:hover{
            .comment-right .edit{
              opacity: 1;
            }
          }
        }
        .comment-top{
          white-space: nowrap;
        }
        .nick-date{
          display: inline-block;
          max-width: 120px;
          vertical-align: middle;
          white-space: normal;
          padding: 0 5px 0 10px;
        }
        .comment-nickname{
          display: inline-block;
          width: 100%;
          @include ellipsis;
          font-size: 14px;
          color: #fff;
        }
        .comment-time{
          display: block;
          font-size: 12px;
          width: 100%;
          color: #ccc;
        }
        .comment-right{
          padding: 0 0 0 50px;
          white-space: nowrap;
          align-self: center;
          .comment-like{
            display: inline-block;
            vertical-align: top;
            padding: 0 12px 0 8px;
            &.clicked{
              color: #ff7900;
            }
          }
        }
        .comment-con-box{
          padding: 8px 10px;
          position: relative;
          flex: 1;
          .reply-to{
            display: inline-block;
            width: 100%;
            @include ellipsis;
            font-size: 12px;
          }
        }
        .comment-content{
          color: #f3f3f3;
          white-space: pre-wrap;
          font-size: 12px;
        }
        .reply-list{
          padding: 10px 0 0 50px;
          .reply-item{
            background: lighten($background, 0.9);
            display: flex;
            padding: 3px 10px;
            color: #fff;
            margin: 3px 0;
            &:hover{
              .edit{
                opacity: 1;
              }
            }
          }
          .reply-top{
            white-space: nowrap;
          }
        }
      }
    }
  }
  #videoPlayer {
    width: 100%;
  }
  .video-sidebar {
    width: 25%;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    color: #fff;
    background: #fff;
  }
  .det{
    font-size: 14px;
    line-height: 25px;
  }
  .tab-content {
    padding-top: 10px;
  }
  .relative-item {
    margin-bottom: 8px;
  }
  .list-unstyled {
    padding-left: 0;
    list-style: none;
    color: #666666;
    font-size: 14px;
    li {
      margin-bottom: 10px
    }
  }
  .media {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    .img-b{
      padding: 0 10px 0 0;
      img {
        border-style: none;
      }
    }
  }
  .media-body {
    color: #555;
  }
  .media-title {
    margin-bottom: 5px;
    margin-top: 0;
    font-size: 18px;
    width: 100%;
    a{
      display: inline-block;
      color: #333;
      width: 100%;
      @include ellipsis;
    }
  }
  .homeLink {
    display: block;
    text-align: center;
    font-size: 22px;
  }
  .cast{
    color: $primary;
  }
}